import { IFormProps, size, formItemLayout, getUploadResult, productPage, getImages, getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, Upload, Checkbox, InputNumber, Col, Button, Table, Popconfirm } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
const Styles = require("../../styles/index.less");
export interface IItemSkuListProps extends FormComponentProps {
    itemSkus: Array<api.SingleUserMallItemsVOItemSkuVO>,
    loading: boolean,
    onSearch: (any) => void,
    onEdit: (any?) => void,
    onRemove: (any) => void,
    onEditCategory: (any?) => void,
    onRemoveCategory: (any) => void,
}
class ItemSkuList extends React.PureComponent<IItemSkuListProps, any>{
    constructor(props) {
        super(props);
    }

    search = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                this.props.onSearch(form);
            }
        });
    }

    add = () => {
        this.props.onEdit();
    }

    addCategory = () => {
        this.props.onEditCategory();
    }

    edit = (itemSku) => {
        this.props.onEdit(itemSku);
    }

    editCategory = (itemSkuCategory) => {
        this.props.onEditCategory(itemSkuCategory);
    }

    remove = (id) => {
        this.props.onRemove(id);
    }

    removeCategory = (id) => {
        this.props.onRemoveCategory(id);
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { itemSkus, loading } = this.props;
        const expandedRowRender = (skus?: api.SingleUserMallItemsVOItemSkuVO[]) => {
            return (<Table
                dataSource={skus}
                pagination={false}
                rowKey={(record: api.SingleUserMallItemsVOItemSkuVO) => String(record.id)}
            >
                <Table.Column title="序号" key="no" render={(text, record, index) => {
                    return index + 1
                }} />
                <Table.Column title="规格" key="sku" dataIndex="sku" />
                <Table.Column title="操作" render={(text, record: api.SingleUserMallItemsVOItemSkuVO, index) => {
                    return (
                        <div>
                            <a className={Styles.M_RIGHT} onClick={() => this.edit(record)}>
                                编辑
                                </a>
                            <Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                <a>删除</a>
                            </Popconfirm>
                        </div>
                    );
                }} />
            </Table>)
        }
        return (<Col span={24}>
            <Form layout="inline">
                <Form.Item>
                    <Button size={size} onClick={this.addCategory}>新增规格</Button>
                </Form.Item>
                <Form.Item>
                    <Button size={size} onClick={this.add}>新增规格明细</Button>
                </Form.Item>
                <Form.Item>
                    <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                </Form.Item>
            </Form>
            <Col span={24}>
                <hr className={Styles.hrBorder} />
                <h3>商品规格列表</h3>
            </Col>
            <Col span={24}>
                <Table
                    dataSource={itemSkus}
                    bordered
                    pagination={false}
                    expandedRowRender={(record: api.SingleUserMallItemsVOItemSkuCategoryVO) => expandedRowRender(record.itemSkus)}
                    rowKey={(record: api.SingleUserMallItemsVOItemSkuCategoryVO) => String(record.id)}
                    loading={loading}
                >
                    <Table.Column title="序号" key="no" render={(text, record, index) => {
                        return index + 1
                    }} />
                    <Table.Column title="规格类别" key="name" dataIndex="name" />
                    <Table.Column title="操作" render={(text, record: api.SingleUserMallItemsVOItemSkuCategoryVO, index) => {
                        return (
                            <div>
                                <a className={Styles.M_RIGHT} onClick={() => this.editCategory(record)}>
                                    编辑
                                </a>
                                <Popconfirm title="确定删除吗?" onConfirm={() => { this.removeCategory(record.id); }}>
                                    <a>删除</a>
                                </Popconfirm>
                            </div>
                        );
                    }} />
                </Table>
            </Col>
        </Col>)
    }
}

export default Form.create()(ItemSkuList);